<template>
  <view class="page">
    <!-- 切换选择 -->
    <view class="ranking-type-choice">
        <view class="list">
          <view class="item" v-for="item in rankTypeChoiceList" :key="item.value"
            :class="{ active: item.value === currentSelectedRankType }" @click="() => {
        currentSelectedRankType = item.value
        resetPaginationAndReloadData()
      }
        ">{{ item.label }}</view>
        </view>
      </view>
       <!--	按钮点击选择-->
       <view class="search-type-choice">
        <view class="item" v-for="item in searchTypeChoiceList" :key="item.value"
          :class="{ active: item.value === currentSelectedSearchType }" @click="() => {
        currentSelectedSearchType = item.value
        resetPaginationAndReloadData()
      }
        ">{{ item.label }}</view>
      </view>
      <view class="rank-list">
        <view class="table-header column">
          <view class="item column-item-1 column-item">排名</view>
          <view class="item column-item-2 column-item">用户</view>
          <view class="item column-item-3 column-item" style="color: #a75b07">累计学习时长</view>
        </view>
        <template v-if="rankRecordList.length > 0">
          <view class="rank-item column" v-for="(item, index) in rankRecordList" :key="item.userId">
            <!--					排名-->
            <view class="column-item-1 column-item">
              <view class="rank-num" :class="'rank-num-' + index">{{ index }}</view>
            </view>
            <!--					用户信息-->
            <view class="userInfo column-item-2 column-item">
              <!--						头像-->
              <view class="avatar-container">
                <image class="avatar" :src="getShowImage(item.userIcon)" v-if="item.userIcon"></image>
                <text class="avatar text">{{ item.nickName[0] }}</text>
              </view>
              <!--						昵称-->
              <view class="nick-name">{{ item.nickName }}</view>
            </view>
            <!--					累计学习时长-->
            <view class="duration column-item-3 column-item">
              <!--							时-->
              <template v-if="item.duration.h > 0">
                <text class="number">{{ item.duration.h }}</text>
                <text>h</text>
              </template>

              <!--						分-->
              <template v-if="item.duration.m > 0">
                <text class="number">{{ item.duration.m }}</text>
                <text>min</text>
              </template>

              <!--						秒-->
              <template v-if="item.duration.h === 0">
                <text class="number">{{ item.duration.s }}</text>
                <text>s</text>
              </template>
            </view>
          </view>
          <uni-load-more :status="loadMoreStatusText"></uni-load-more>
        </template>
        <empty v-else height="900rpx"></empty>
      </view>
  </view>
</template>

<script>
import request from "@/utils/request"
import dateUtils from "@/utils/dateUtils"

export default {
  computed: {},
  components: {},
  data() {
    return {
      rankTypeChoiceList: [
        {
          label: "背单词",
          value: "word",
        },
        {
          label: "刷真题",
          value: "question",
        },
        {
          label: "开放自习室",
          value: "self_study",
        },
      ],
      searchTypeChoiceList: [
        {
          label: "周榜",
          value: "week",
        },
        {
          label: "月榜",
          value: "month",
        },
        {
          label: "总榜",
          value: "all",
        },
      ],
      // 点击样式激活-下划线和按钮背景
      currentSelectedRankType: "self_study",
      currentSelectedSearchType: "all",
      // 排行榜列表
      rankRecordList: [],
      // 列表分页
      pagination: {
        current: 1,
        size: 15,
      },
    }
  },
  // 获取活动列表
  onLoad() {
    this.getRankRecordList()
  },
  onShow() {},
  methods: {
    // 列表获取
    getRankRecordList() {
      return new Promise((resolve, reject) => {
        if (this.loadMoreStatusText === "loading") {
          resolve()
          return
        }
        this.loadMoreStatusText = "loading"
        request({
          url: "statistics/wordsDurationRanking",
          data: {
            rankingType: this.currentSelectedRankType,
            searchType: this.currentSelectedSearchType,
            current: this.pagination.current,
            size: this.pagination.size,
          },
          errorHandle: true,
        }).then((data) => {
          //格式化时间
          for (let record of data.records) {
            record.duration = dateUtils.formatTimeObject2(record.duration)
          }
          this.rankRecordList.push(...data.records)
          if (this.rankRecordList.length >= data.total) {
            this.loadMoreStatusText = "noMore"
          } else {
            this.loadMoreStatusText = "more"
          }
          resolve()
        })
      })
    },

    //  点击分页并且传参处理
    resetPaginationAndReloadData() {
      this.pagination.current = 1
      this.rankRecordList = []
      uni.showLoading({ title: "加载中" })
      this.getRankRecordList().finally(() => {
        uni.hideLoading()
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.page {
  .ranking-type-choice {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .list {
      display: flex;

      .item {
        &:not(:first-child) {
          margin-left: 40rpx;
        }

        padding-bottom: 6rpx;
        font-size: 32rpx;

        &.active {
          color: #1684fc;
        }

        position: relative;

        &.active::after {
          content: "";
          position: absolute;
          left: 0;
          right: 0;
          bottom: -6rpx;
          height: 6rpx;
          background: #1684fc;
        }
      }
    }

    .more-icon-container {
      width: 50rpx;
      height: 50rpx;
      position: relative;

      .more-icon {
        width: 100%;
        height: 100%;
      }

      .more-popup {
        .mask {
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
        }

        .content {
          position: absolute;
          top: calc(100% + 20rpx);
          right: 0;
          background: var(--background-color);
          border-radius: 10rpx;
          box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.5);
          max-height: 800rpx;
          overflow-y: auto;

          .item {
            width: 400rpx;
            text-align: center;
            padding: 20rpx 0;
            font-size: 32rpx;
            font-weight: bold;
            //文本溢出自动加省略号
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }
      }
    }
  }
  .search-type-choice {
    display: flex;
    margin-top: 30rpx;
    border: 2rpx solid #34cc5f;
    border-radius: 10rpx;

    .item {
      width: 0;
      flex: 1;
      padding: 10rpx 0;
      font-size: 32rpx;
      color: #34cc5f;
      text-align: center;

      &:not(:first-child) {
        border-left: 2rpx solid #34cc5f;
      }

      &.active {
        background: #34cc5f;
        color: var(--text-color-white);
      }
    }
  }
  .rank-list {
    margin-top: 30rpx;

    .column {
      display: flex;
      margin-bottom: 30rpx;

      .column-item {
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .column-item-1 {
        flex-grow: 1;
        width: 0;
      }

      .column-item-2 {
        flex-grow: 3;
        width: 0;
        margin-left: 20rpx;
      }

      .column-item-3 {
        flex-grow: 2;
        width: 0;
        margin-left: 20rpx;
      }
    }

    .table-header {
      .item {
        font-size: 32rpx;
        color: #666060;
      }
    }

    .rank-item {
      .rank-num {
        border: 6rpx solid #bbbbbb;
        font-size: 30rpx;
        border-radius: 6rpx;
        width: 60rpx;
        height: 60rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #bbbbbb;
        font-weight: bold;

        &.rank-num-0 {
          color: #a70707;
          border-color: #a70707;
        }

        &.rank-num-1 {
          color: #0774a7;
          border-color: #0774a7;
        }

        &.rank-num-2 {
          color: #fbca42;
          border-color: #fbca42;
        }
      }

      .userInfo {
        .avatar-container {
          width: 80rpx;
          height: 80rpx;
          border-radius: 50%;
          overflow: hidden;

          .avatar {
            width: 100%;
            height: 100%;
          }

          .text {
            font-size: 32rpx;
            color: #ffffff;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #3c3c3c;
          }
        }

        .nick-name {
          margin-left: 16rpx;
          width: 0;
          flex: 1;
          font-size: 30rpx;
          //文本溢出部分自动加省略号
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }

      .duration {
        font-size: 32rpx;

        .number {
          color: #a75b07;
        }
      }
    }
  }
}
</style>
